<template>
    <div>
        <div class="headertitle1">
            <h2 class="h2-Title">管理节日:</h2>
        </div>
        <div class="headertitle2" v-show="this.islogin">
            <el-button type="primary" @click="goBack()" round class="revertbtn">返回</el-button>
            <el-button type="primary" @click="signOut()" round class="revertbtn">退出</el-button>
        </div>
        <br />
        <br />
        <div v-show="!this.isEditorAdd">
            <el-table class="festivaltable"
                :data="this.$store.state.festivalListDatas.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                :key="Math.random()" style="width: 100%" max-height="450" stripe>
                <el-table-column fixed prop="name" label="名称" width="80">
                </el-table-column>
                <el-table-column prop="holiday" label="过节时间" width="200">
                </el-table-column>
                <el-table-column prop="namePicture" label="节日名称配图" width="250">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.namePicture"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="homePicture" label="主页配图" width="250">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.homePicture"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <div class="addbutton">
                            <el-button round class="revertbtn" size="mini" type="danger"
                                @click="addFestival(scope.$index, scope.row)">新增
                            </el-button>
                        </div>
                        <div class="searchinput">
                            <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <el-button round class="revertbtn" size="mini" type="danger"
                            @click="editFesitval(scope.$index, scope.row)">编辑</el-button>
                        <el-button round class="revertbtn" size="mini" type="danger"
                            @click="deleteFestival(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-show="this.isEditorAdd">
            <FestivalAddorEdit ref="festivalAddorEdit"></FestivalAddorEdit>
        </div>
    </div>
</template>

<script>
import FestivalAddorEdit from "@/components/FestivalAddorEdit.vue"
export default ({
    components: {
        FestivalAddorEdit,
    },
    props: [],
    data() {
        return {
            isEditorAdd: false,
            islogin: false,
            search: "",
            viewname: "FestivalList",
            selectFestivalId: 0,
        };
    },
    created() {
        this.ChangeIsLogin();
    },
    methods: {
        ChangeIsLogin() {
            if (this.$store.state.userinfo !== "") {
                this.islogin = true;
            } else {
                this.islogin = false;
            }
        },
        signOut(id) {
            this.$store.commit("SaveUserInfo", "");
            this.$store.commit("Change", { id: id, name: "Login" });
        },
        goBack(id) {
            if (this.isEditorAdd === true) {
                this.isEditorAdd = false
            } else {
                this.$store.commit("Change", { id: id, name: "FestivalList" });
            }
            this.getFestivalData()
        },
        addFestival() {
            this.isEditorAdd = true
            this.$refs.festivalAddorEdit.clearFestivalData()
        },
        editFesitval(index, row) {
            this.$refs.festivalAddorEdit.clearFestivalData()
            this.$refs.festivalAddorEdit.getFestivalInfo(row.id)
            this.isEditorAdd = true
        },
        deleteFestival(index, row) {
            this.$api.DeleteFestival({ id: row.id }).then((res) => {
                if (res.data.status === 200) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getFestivalData()
                } else {
                    this.$message({
                        message: `删除失败,${res.data.msg}`,
                        type: "error",
                    });
                    return false;
                }
            })
        },
        getFestivalData() {
            this.$api.GetFestivalList().then((res) => {
                if (res.data.status === 200) {
                    this.$store.state.festivalListDatas = res.data.data.map((item) => {
                        return {
                            id: item.id,
                            name: item.name,
                            holiday: item.holiday,
                            namePicture: `${item.namePicture}`,
                            homePicture: `${item.homePicture}`,
                            titleDesc: item.titleDesc,
                            titlePicture: `${item.titlePicture}`,
                            originDesc: item.originDesc,
                            originPicture: `${item.originPicture}`,
                            legendDesc: item.legendDesc,
                            legendPicture: `${item.legendPicture}`
                        };
                    });
                } else {
                    this.$message({
                        message: `获取数据失败,${res.data.msg}`,
                        type: "error",
                    });
                    return false;
                }
            });
        },
    }
})
</script>

<style scoped>
.festivaltable {
    border-radius: 10px;
    background-color: #fef6e7;
}

.headertitle1 {
    display: inline-block;
}

.headertitle2 {
    padding-top: 10px;
    float: right;
}

.addbutton {
    display: inline-block;
}

.searchinput {
    float: left;
}

.h2-Title {
    padding-top: 20px;
    font-size: 23px;
    padding-bottom: 5px;
}

.revertbtn {
    width: 100px;
    font-weight: bold;
    color: #e11057;
    transition: all 0.5s;
    background-color: #fef6e7;
    border: 1px solid #e11057;
}

.revertbtn:hover {
    transition: all 0.5s;
    background-color: #e11057;
    border: 1px solid #e11057;
}

.revertbtn:focus {
    transition: all 0.5s;
    background-color: #e11057;
    border: 1px solid #e11057;
}
</style>